<template>
  <view class="start-repair">
    <view class="info-content">
      <view class="info-main">
        <view class="uni-form-item uni-column">
          <view class="item-content">
            <view class="box-left-icon">
              <text class="iconfont icon-bitian icon1"></text>
            </view>
            <view class="title item-content-title">外出日期</view>
            <view class="item-content-input">
              <view class="uni-input">
                {{ date }}
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="item-content">
            <view class="box-left-icon">
              <text class="iconfont icon-bitian icon1"></text>
            </view>
            <view class="title item-content-title">预计时间</view>
            <view class="item-content-input">
              <view class="uni-input">
                {{ time }}
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="item-content">
            <view class="box-left-icon">
              <text class="iconfont icon-bitian icon1"></text>
            </view>
            <view class="title item-content-title">电话</view>
            <view class="item-content-input">
              <view class="uni-input">
                {{ phone }}
              </view>
            </view>
          </view>
        </view>

        <view class="uni-form-item uni-column">
          <view class="item-content">
            <view class="box-left-icon">
              <text class="iconfont icon-bitian icon1"></text>
            </view>
            <view class="title title2">交通工具</view>
          </view>
          <view class="uni-textarea1">
            <textarea
              class="uni-width"
              placeholder-style="color:#333"
              :placeholder="trans"
              name="address"
              disabled
            />
          </view>
        </view>

        <view class="uni-form-item uni-column" id="uni-column-last">
          <view class="item-content">
            <view class="box-left-icon">
              <text class="iconfont icon-bitian icon1"></text>
            </view>
            <view class="title title2">目的地</view>
          </view>
          <view class="uni-textarea1">
            <textarea
              class="uni-width"
              placeholder-style="color:#333"
              :placeholder="dest"
              disabled
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: "18:01",
      date: "2021-12-05",
      phone: "13592571900",
      trans: "",
      dest: "",
      openid: "",
      name: "",
      goDetailData: {},
    };
  },
  onLoad(option) {
    this.goDetailData = JSON.parse(decodeURIComponent(option.editItem));
    console.log(this.goDetailData);
    this.initDate();
  },
  methods: {
    initDate() {
      let twoTime = this.goDetailData.time.split(" ");
      this.date = twoTime[0];
      this.time = twoTime[1];
      this.phone = this.goDetailData.phone;
      this.trans = this.goDetailData.trans;
      this.dest = this.goDetailData.dest;
      // console.log(te[0],);
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.start-repair {
  width: 100%;
  height: 100vh;
  background-color: $uni-color-indexBg;
}
.info-content {
  margin: 0 15rpx;
  padding-top: 10px;

  .info-main {
    padding: 0 15rpx;
    background-color: $uni-color-mainBg;
    box-sizing: border-box;
    border-radius: 5px;
    .uni-column {
      border-bottom: 1rpx solid #d8d8de;
      // border-bottom: 1rpx solid #0a0a3d;
      padding: 12rpx 0;

      .uni-label-pointer {
        font-size: 28rpx;
        .uni-checkbox-input {
          width: 20px;
          height: 20px;
        }
      }
      .title {
        // font-size: 55rpx;
        font-size: 30rpx;
        padding: 0 0 15rpx 0;
      }
      .item-content {
        display: flex;
        align-items: center;
        .title {
          // font-size: 55rpx;
          font-size: 30rpx;
          padding: 20rpx 0;
        }

        .item-content-input {
          position: absolute;
          left: 340rpx;
          .uni-input {
            // padding-left: 40rpx;
            font-size: 30rpx;
            color: #333;
          }
        }
      }

      // .title {
      //   padding: 30rpx 0;
      // }
    }
    #uni-column-last {
      // border-bottom: 1rpx solid #3d0a0a;
      padding-bottom: 30rpx;
      border: none;
    }
  }
  .info-step {
    // margin-top: 20%;
    width: 100%;
    padding: 30rpx 0;
    box-sizing: border-box;
    // marggn-top: 100rpx;
    // background-color: $uni-color-mainBg;
    .uni-steps {
      // height: 200rpx;
      background-color: $uni-color-mainBg;
      active-color: $uni-color-primary;
      // transform: scale(1.1);
      padding: 60rpx 0;

      box-sizing: border-box;
      // @include center;
      // font-size:80rpx;
    }
  }
  .info-step-test {
    background-color: $uni-color-mainBg;
    padding: 0 0 20rpx 0;
    @include center;
    color: $uni-color-warning;
  }
}
.uni-width {
  // width: 95%;
  width: 100% !important;
  font-size: 30rpx;
  height: 80px;
  // padding: 10rpx 15rpx;
}
.uni-textarea1 {
  margin: 0 auto;
  // box-sizing: border-box;
  border-radius: 2%;
  background-color: $uni-bg-color-hover;
  padding: 10rpx 15rpx;
  font-size: 12rpx;
  height: 80px;
}
.min {
  font-size: 19rpx;
  left: 340rpx;
  color: #fa3534;
  position: absolute;

  // font-weight: bold;
}
.min2 {
  font-size: 19rpx;

  color: #fa3534;
}
</style>
